<template>
    <div ref="sc" @scroll="doScroll" class="homes">
        <div ref="drawer" style="height: 85vh;display: flex;align-items: center;justify-content: center;">
            <div>
                <VueTypedJs style="background-image:-webkit-linear-gradient(right,#fd8403,yellow,skyblue); -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent;color:linen;font-weight: bold;font-size: 2vw;" :cursorChar="'_'"
                    :strings="['什么都无法舍弃的人，什么都无法改变。']" :typeSpeed="100" :backSpeed="100">
                    <span class="typing"></span>
                </VueTypedJs>

            </div>
        </div>
        <div style="color: aliceblue;width: 100%;height:  5vh;display: flex;justify-content: center;">
            <div @click="draw"><img class="upup" v-if="shouDraw" style="width: 2vw;" src="../../assets/svg/draw.svg"
                    alt="">

            </div>
        </div>



        <div class="contain">
            <div class="left">
                <div class="left_0">

                    <el-avatar :class="{ 'rotate-box': true, 'paused': !store.isplay }"
                        style="width: 10vw;height: 10vw;" shape="circle" :src="base_url + store.other_music.url_img" />
                    <div style="width: 50%;overflow: hidden">
                        <p ref="font_len" :class="{ 'font_show': true, 'paused': !store.isplay }"
                            style="white-space:nowrap;margin-top: 0.5vw;color:beige">
                        <p>{{ store.other_music.singer }}</p>
                        <p>{{ store.other_music.musicname }}</p>
                        </p>

                    </div>
                    <div class="control">
                        <div class="up" @click="up_left" style="flex:1;display:flex;justify-content: center;">
                            <img style="width: 20%;height: 20%;" :src="base_url + '/assets/svg/home/left.svg'" alt="">
                        </div>
                        <div @click="ControlePlays" style="flex:1;display:flex;justify-content: center;" class="modile">
                            <img style="width: 20%;height: 20%;"
                                :src="store.isplay ? base_url + '/assets/svg/home/pause.svg' : base_url + '/assets/svg/home/play.svg'"
                                alt="">
                        </div>
                        <div @click="up_right" style="flex:1;display:flex;justify-content: center;" class="down">
                            <img style="width: 20%;height: 20%;" :src="base_url + '/assets/svg/home/right.svg'" alt="">
                        </div>
                    </div>

                </div>
                <div class="left_2">
                    <el-card>
                        <p style="font-weight: bold;font-size: 1vw;text-align: center;margin-bottom: 0.5vw;">文章搜索
                        </p>
                        <el-input @blur="to_blur" v-model="input3" @input="inpust" style="width: 100%;height: 2vw;"
                            placeholder="搜索内容" :prefix-icon="Search" />

                    </el-card>

                    <div class="searchlsit">
                        <p v-if="blur_lsit" @click="to_search_deail(item)" class="search_item"
                            style="text-align: center;padding: 0.5vw;" v-for="item in searchList" :key="item._id">
                            {{ item.title }}
                        </p>

                    </div>


                </div>
                <div class="left_1">
                    <el-card style="width: 70%" shadow="always" :body-style="{ padding: '20px' }">
                        <div @click="choice_one(item.id)" v-for="item in category" :key="item.id" class="left_1_item"
                            style="display: flex;align-items: center;">
                            <img :src="item.icon" style="width: 2.5vw;" alt="">
                            <span :class="{ 'font_color': choice_one_id === item.id }"
                                style="font-weight:bold;font-size: 1vw;margin-left: 2vw;">{{ item.title }}</span>
                        </div>
                    </el-card>
                </div>
                <div class="left_3">
                    <el-card style="width: 70%">
                        <template #header>
                            <div style="display: flex;justify-content: center;align-items: center;">
                                <img :src="base_url + '/assets/svg/home/fire.svg'" style="width: 15%;margin-right: 1vw;"
                                    alt="">
                                <span style="font-size: 1.5vw;font-weight:bold;">推荐</span>
                            </div>
                        </template>
                        <div style="width: 100%;margin-bottom: 1vw;" @click="to_detali(item._id)"
                            v-for="item in store.recommend_list">
                            <img :src="base_url + item.cover_img" style="width: 100%;" alt="">
                            <div style="width: 100%;">
                                <h4 style="font-size: 1vw;">{{ item.publish_time }}</h4>
                                <p style="font-size: 1vw;" class="omit">
                                    {{ item.title }}
                                </p>
                            </div>
                        </div>


                    </el-card>

                </div>
            </div>
            <div class="right">
                <div v-if="isshow">
                    <router-view></router-view>
                </div>

            </div>
        </div>

        <div v-if="snow">
            <Home_Header>
            </Home_Header>
        </div>
    </div>
</template>

<script setup lang="ts">
import { AppStore } from "@/store/index"
import { Search } from '@element-plus/icons-vue'
import { useRouter, useRoute, onBeforeRouteLeave, } from "vue-router"
import Home_Header from "@/components/Home/Home_Header.vue"
import { onMounted, ref, onActivated } from "vue";
import { VueTypedJs } from "vue3-typed-ts";
import WebStore from "@/store/WebStore";
import { search } from "@/apis/web/WebApi"
const weStore = WebStore()
const blur_lsit = ref(false)
//防抖
let timer: any
const base_url = import.meta.env.VITE_APP_URL
const isshow = ref(false)
let shouDraw = ref(true)
const store = AppStore()
const $router = useRouter()
const route = useRoute()
const snow = ref(true)
const isplayMusic = ref(false)
const input3 = ref('')
const choice_one_id = ref('0')
const searchList = ref()
let sc = ref()
let drawer = ref()
const doScroll = () => {

    if (sc.value.scrollTop > 200) {
        snow.value = false
    } else {
        snow.value = true
    }
    if (drawer.value.scrollHeight - sc.value.scrollTop < 100) {
        shouDraw.value = false
    } else {
        shouDraw.value = true
    }
    if (sc.value.scrollTop + sc.value.clientHeight + 3 >= sc.value.scrollHeight) {
        weStore.currentState++
    }

}
onMounted(() => {
    console.log("挂载home")
    isshow.value = true
    switch (route.fullPath) {
        case '/home/essay':
            choice_one_id.value = '0'
            break;
        case '/home/routine':
            choice_one_id.value = '1'
            break;
        case '/home/media':
            choice_one_id.value = '2'
            break;
        default:
            break;
    }


})
const isPaused = ref(true);
const toggleRotation = () => {
    isPaused.value = !isPaused.value;
}
const ControlePlays = () => {
    store.isplay = !store.isplay

    if (store.isplay) {
        toggleRotation()

        isplayMusic.value = true
    } else {
        toggleRotation()

        isplayMusic.value = false
    }
}
const draw = () => {
    sc.value.scrollTo({ top: drawer.value.scrollHeight, behavior: "smooth" });

}
const category = [
    {
        id: '0',
        title: "文章记录",
        icon: base_url + '/assets/svg/home/article.svg'
    },
    {
        id: "1",
        title: "日常分享",
        icon: base_url + '/assets/svg/home/routine.svg'
    },
    {
        id: "2",
        title: "视听分享",
        icon: base_url + '/assets/svg/home/talk.svg'
    }
]
const choice_one = (id: string) => {

    switch (id) {
        case '0':
            $router.push("/home/essay")
            choice_one_id.value = id
            sc.value.scrollTo({ top: drawer.value.scrollHeight, behavior: "smooth" });
            break;
        case '1':
            $router.push("/home/routine")
            choice_one_id.value = id
            sc.value.scrollTo({ top: drawer.value.scrollHeight, behavior: "smooth" });
            break;
        case '2':
            $router.push('/home/media')
            choice_one_id.value = id
            sc.value.scrollTo({ top: drawer.value.scrollHeight, behavior: "smooth" });
            break
        default:
            $router.push("/home/essay")
            choice_one_id.value = id
            break;
    }
}
const up_left = () => {
    console.log("left")
    store.get_left()
}
const up_right = () => {
    console.log("right")
    store.get_right()
}
onBeforeRouteLeave((to, from, next) => {
    // 将当前位置进行一个状态保存
    to
    from
    store.scro_position = sc.value.scrollTop
    next()
})
//   组件激活
onActivated(() => {
    choice_one_id.value = '0'
    if (store.scro_position != null && store.scro_position > 0) {
        sc.value.scrollTo({ top: store.scro_position });
    }
})
const to_detali = (e: any) => {
    $router.push(`/essay_detail/${e}`)
}
const to_blur = () => {
    setTimeout(() => {
        blur_lsit.value = false
    }, 200);
}
const inpust = async () => {
    blur_lsit.value = true
    clearTimeout(timer)

    if (input3.value.trim() === '') {
        searchList.value = []
        return
    }
    timer = setTimeout(async () => {
        console.log(input3.value)
        searchList.value = []
        const result = await search(input3.value)
        searchList.value = result.data
        console.log(searchList.value)
    }, 200)
}
const to_search_deail = (e: any) => {
    console.log(e)
    if (e.Essay_type === '1') {
        $router.push(`/routine_detail/${e._id}`)
    } else {
        $router.push(`/essay_detail/${e._id}`)

    }
}


</script>
<style lang="scss" scoped>
@keyframes font_s {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes ups {
    0% {}

    50% {
        transform: translateY(-10%) scale(1.5);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

.upup {
    animation: ups 1s infinite linear;
}

.screen-enter-active,
.screen-leave-active {
    transition: opacity 1s;
}

.screen-enter-to {
    opacity: 1;
}

.screen-enter-from,
.screen-leave-to {
    opacity: 0;
}

.homes {
    transform: all 1s;
    height: 91vh;
    overflow: scroll;


}

.draw {
    transform: translateY(0);
}

.contain {

    display: flex;
    align-items: flex-start;





    .left {
        flex: 3;
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        .left_0 {
            width: 70%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 1vw;


            .control {
                margin-top: 1vh;
                width: 100%;
                height: 5vh;
                background-color: rgba(0, 0, 0, 0.5);
                border-radius: 10px;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                padding: 1vw;
            }
        }

        .left_1 {
            margin-top: 10vh;
            display: flex;
            justify-content: flex-end;
            width: 100%;
            height: 13vw;

            .el-card {
                margin-right: 1vw;
                background: rgba(225, 225, 225, 0.8);
                border-width: 0;
                height: 100%;
            }

            .el-card:hover {
                box-shadow: 0px 0px 10px #000;
            }

            .left_1_item {
                margin-bottom: 1vw;

            }

            .left_1_item:hover {
                color: orange;
            }

            .font_color {
                color: orange;
            }
        }

        .left_2 {
            position: relative;
            margin-top: 10vh;
            width: 100%;
            right: 1vw;
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            .searchlsit {
                width: 70%;
                top: 88%;
                position: absolute;
                background-color: aliceblue;
                border-radius: 10px;
                font-size: 1vw;

                .search_item:hover {
                    background-color: rgba(255, 165, 0, 0.5)
                }
            }

            .el-card {
                width: 70%;
                border-width: 0;
                border-radius: 1vw;
                background: rgba(225, 225, 225, 0.8);
                height: 100%;
            }

            :deep(.el-input__wrapper) {
                font-size: 1vw;
            }

            .el-card:hover {
                box-shadow: 0px 0px 10px #000;
            }
        }

        .left_3 {
            margin-top: 10vh;
            position: relative;
            width: 100%;
            right: 1vw;
            display: flex;
            justify-content: flex-end;

            .el-card {
                border-width: 0;
                background: rgba(225, 225, 225, 0.8);

                .omit {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;

                }

            }

            .el-card:hover {
                box-shadow: 0px 0px 10px #000;
            }
        }
    }

    .right {
        flex: 7;
        display: flex;
        flex-wrap: wrap;
    }

    .font_show {
        animation: font_s 7s infinite linear;
    }

    .rotate-box {
        animation: rotation 15s infinite linear, expands 1.5s infinite alternate linear;

    }



    .paused {
        animation-play-state: paused;
    }

    @keyframes rotation {

        from {

            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    @keyframes expands {
        0% {
            box-shadow: 0px 0px 10px #000;
        }

        100% {
            box-shadow: 0px 0px 100px #000;
        }

    }
}
</style>